<template>
	<view class="shop">
		<view class="head">
			<view class="plr30 flex-between-center wper100">
				<view class="flex-align-center">
					<u-icon name="map" color="#06B7F3" size="16">
					</u-icon>
					<text class="f28 ml10">所在地区</text>
				</view>
				<view class="flex-align-center" @click="selectCity">
					<text class="f28 c-info mr20">{{areaName}}</text>
					<u-icon name="arrow-right" color="#06B7F3" size="12">
					</u-icon>
				</view>
			</view>
		</view>
		<view class="h98">

		</view>
		<cust-empty desc="暂无数据" v-if="loadStatus=='none'">
		</cust-empty>

		<view class="p30">
			<view class="card-shadow-box mb30" v-for="item in list" @click="goto(item)">
				<view class="bb">
					<view class="bb ptb24 flex-align-center">
						<view class="line_primary"></view>
						<text class="f24 bold ml10">{{item.name}}</text>
					</view>
					<view class="pt24">
						<text class="f24 c-desc">电话号码：</text>
						<text class="f24">{{item.phone}}</text>
					</view>
					<view class="pt24">
						<text class="f24 c-desc">营业时间：</text>
						<text
							class="f24">{{item.businessHoursStart.substring(0, 5)}}-{{item.businessHoursEnd.substring(0, 5)}}</text>
					</view>
					<view class="flex-between-center pt24">
						<view>
							<text class="f24 c-desc">门店地址：</text>
							<text class="f24">{{item.address}}</text>
						</view>
						<u-icon name="arrow-right" color="#06B7F3" size="14">
						</u-icon>
					</view>
					<view class="flex-between-center ptb24">
						<view>
							<text class="f24 c-desc">距离我<text class="bold plr6 c-primary">{{item.distance}}</text>{{item.distanceUnit}}</text>
						</view>
						
					</view>
				</view>
				<view class="mt24 flex-align-center flex-wrap">
					<view class="tag-bg-primary" v-for="element in item.serviceItems.split(' | ')">{{element}}</view>
				</view>
			</view>
		</view>
		<view class="nomore" v-if="loadStatus != 'none'">
			<u-loadmore :status="loadStatus" />
		</view>
		<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="confirm" :defaultIndex="defaultIndex"></u-picker>
	</view>
</template>

<script>
	import {
		getRegionDataAPI,
		getShopListAPI
	} from "@/api/api/my.js"
	import custEmpty from "@/components/cust-empty/index.vue"
	import pages from "@/mixins/pages.js";
	import {
		baiduUrl,
		baiduAK
	} from '@/api/http/setting';

	import {
		throttle
	} from '@/utils/utils.js'
	export default {
		mixins: [pages],
		components: {
			custEmpty
		},
		onLoad() {
			this.page = {
					current: 1,
					size: 100,
				};
			this.isSort = true;
			this.getLocation();
			this.funAPI = getShopListAPI;
			this.showPropListCallcack = (obj, item) => {
				let businessHoursStart = item.businessHoursStart;
				if(!item.businessHoursStart){
					businessHoursStart = ""
				}
				return {
					id: item.id,
					name: item.name,
					phone: item.phone,
					businessHours: item.businessHoursStart.substring(0, 5) + " - " + item.businessHoursEnd.substring(0,
						5),
					address: item.address,
					serviceItems: item.serviceItems,
					distance:item.distance,
					distanceUnit:item.distanceUnit
					
				}
			};
			this.initList();
			

		},
		data() {
			return {
				show: false,
				areaName: "",
				areaCode: "",
				cityList: [],
				defaultIndex:[0],
				columns: [
					//['中国', '美国', '日本']
				],
			}
		},
		onShow() {
			
			this.$store.commit("setSpecialAppOnShow", false);
		},
		methods: {
			//导航
			goto: throttle(function(item) {
				console.log("导航")
				this.$store.commit("setSpecialAppOnShow", true);
				uni.openLocation({
					latitude: item.latitudeGcj02,
					longitude: item.longitudeGcj02,
					success: function() {},
					fail:(res)=>{
						console.log("导航失败",res)
						this.$showToast(res.errMsg);
					}
				});
			}),
			confirm(data){
				let areaCode = "";
				let areaName = data.value[0];
				this.areaName = areaName;
				for(let i=0;i<this.cityList.length;i++){
					if(this.cityList[i].name == areaName){
						areaCode = this.cityList[i].code;
						break;
					}
				}
				let params = {
					...this.params,
					areaCode: areaCode
				}
				this.params = params;
				this.initList();
				this.getListFun();
				this.show = false;
			},
			selectCity() {
				this.show = true;
			},
			getRegionDataAPIFun() {
				getRegionDataAPI().then(([err, data]) => {
					if (err) return;
					let columns = [];
					this.cityList = data;
					for(let i=0;i<data.length;i++){
						let item = data[i]
						columns.push(item.name);
						if(item.name == this.areaName){
							this.defaultIndex = [i];
						}
					}
					this.columns = [columns];
				})
			},
			getLocation() {
				let that = this;
				let url = "/baiduApi";
				//#ifdef MP-WEIXIN 
				url = baiduUrl;
				//#endif
				uni.getLocation({
					type: 'wgs84',
					success: function(res1) {
						console.log("res===", res1);
						let location = res1.latitude + "," + res1.longitude;
						uni.request({
							url: `${url}/reverse_geocoding/v3/?ak=${baiduAK}&output=json&coordtype=wgs84ll&location=${location}`,
							success: (res) => {
								let result = res.data.result;
								let addressComponent = result.addressComponent;
								that.areaCode = addressComponent.adcode.substring(0, 2);
								that.areaName = addressComponent.province;
								that.params = {
									areaCode: that.areaCode,
									longitude:res1.longitude,
									latitude:res1.latitude
								}
								that.getListFun();
								that.getRegionDataAPIFun();
							}
						});
					},
					fail: function(res) {
						console.log("res", res)
						
						
					}
				});
			}

		}

	}
</script>

<style lang="scss">
	.shop {
		.head {
			background-color: #fff;
			height: 98upx;
			display: flex;
			align-items: center;
			// padding-left: 30upx;
			// padding-right: 30upx;
			position: fixed;
			width: 100%;
			top: 0;
			z-index: 99999;
		}

		.h98 {
			height: 98upx;
		}
	}
</style>
